<template>
  <div>
    订单
    <div>
      <el-row>
        <el-col :span="24" class="dingdan-box1" style="border-bottom: 2px solid #E4E4E4">
          <div class="grid-content bg-purple-dark" style="float: left">
            课程订单列表
          </div>
          <div style="float: right;">
            <el-button size="mini" style="background-color: #FFFFFF" class="small-button" plain @click="returnPage"><i class="el-icon-arrow-left"></i>返回</el-button>
            <el-button size="mini" style="background-color: #FFFFFF" class="small-button" @click="shuaxin"><i class="el-icon-refresh-right"></i>刷新</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="dingdan-box2" style="border-bottom: 2px solid #E4E4E4">
          <div class="grid-content bg-purple-dark" style="float: left;margin-left: 60px;color: #F04844">
            <i class="el-icon-warning"></i>当前订单状态:{{orderStatus}}
          </div>
          <div style="float: right;" v-if="Show">
            <el-button size="mini" style="background-color: #FFFFFF" class="small-button" plain @click="handleClick">修改收获人信息</el-button>
            <el-dialog title="修改收获人信息" :visible.sync="dialogFormVisible" width="60%" center>
              <div class="dialogDiv">
                <el-form class="demo-form-inline" @submit.native.prevent :model="form" :rules="rules" ref="form">
                  <el-form-item label="收货人姓名" :label-width="formLabelWidth" style="width: 350px;margin-left: 150px" prop="name">
                    <el-input :placeholder="Dingdan.yuser" v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码" :label-width="formLabelWidth" style="width: 350px;margin-left: 150px" prop="phone">
                    <el-input :placeholder="Dingdan.phone" v-model="form.phone" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="邮政编码" :label-width="formLabelWidth" style="width: 350px;margin-left: 150px" prop="yyouzheng">
                    <el-input :placeholder="Dingdan.yyouzheng" v-model="form.yyouzheng" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="所在区域" :label-width="formLabelWidth" style="width: 500px;margin-left: 150px">
                    <el-select placeholder="省" class="select-dingdan" v-model="selectProvince" style="width: 100px;">
                      <el-option
                          v-for="item in provinces"
                          size="small"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                          @click.native="changeProvince()"
                      >
                      </el-option>
                    </el-select>
                    <el-select placeholder="市" class="select-dingdan"  v-model="selectCity" style="width: 100px;margin-left: 10px">
                      <el-option
                          v-for="item in cities"
                          size="small"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                          @click.native="changeCity"
                      >
                      </el-option>
                    </el-select>
                    <el-select placeholder="区" class="select-dingdan" v-model="selectArea" style="width: 100px;margin-left: 10px">
                      <el-option
                          v-for="item in area"
                          size="small"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="详细地址" :label-width="formLabelWidth" style="width: 450px;margin-left: 150px" prop="xxdizhi">
                    <el-input type="textarea" v-model="form.xxdizhi"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="margin-left: 300px">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="updateXingxi('form')">确 定</el-button>
                </div>
              </div>
            </el-dialog>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin: 50px 0px 20px 30px">
          <div>
            <i class="el-icon-tickets" style="color: #666666;font-size: 20px">基本信息</i>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin-left: 30px">
          <el-descriptions direction="vertical" :column="6" border>
            <el-descriptions-item label="订单编号" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;"></el-descriptions-item>
            <el-descriptions-item label="发货单流水号" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;"></el-descriptions-item>
            <el-descriptions-item label="用户账号" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;"></el-descriptions-item>
            <el-descriptions-item label="支付方式" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;"></el-descriptions-item>
            <el-descriptions-item label="订单来源" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;"></el-descriptions-item>
            <el-descriptions-item label="订单类型" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;"></el-descriptions-item>
            <el-descriptions-item label="配送方式" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;"></el-descriptions-item>
            <el-descriptions-item label="物流单号" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;"></el-descriptions-item>
            <el-descriptions-item label="自动确认收获时间" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">7天后</el-descriptions-item>
            <el-descriptions-item label="活动信息" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;">无</el-descriptions-item>
            <el-descriptions-item :label="quxiao" label-style="text-align:center;font:bold 16px 微软雅黑" content-style="text-align:center;"></el-descriptions-item>
            <el-descriptions-item label=""></el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
export default {
  name: "JsUserOrderDetailed",  //详细订单
  data() {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      orderStatus:'',//用来判断订单状态
      Show:'',
    }
  },
  created() {
    this.ShopDingdan();
  },
  methods:{
    async ShopDingdan(){
      const {data:res}= await this.$http.get("/JsUserOrder/selet", {
        params:{"shopId":this.$store.state.num}
      });
      console.log(res)
      console.log(shopId)
    },
    shuaxin(){
      //刷新页面的方法
      this.reload();
    },
    returnPage(){
      //此方法用来返回上一个页面
      if (window.history.length <= 1) {
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    handleClick() {
      this.dialogFormVisible = true;
      this.form.name=''
      this.form.phone=''
      this.form.yyouzheng=''
      this.form.xxdizhi=''
    },
    handleClickTwo(){
      this.dialogFormVisibleTwo = true;
      this.form.beizhu = ''
    },
  }
}
</script>

<style scoped>

</style>